<template>
  <div>
    <div class='banner' @click="handleBannerClick">
      <div class="banner-wrapper">
        <swiper :options="swiperOptions">
          <swiper-slide v-for="item of imgs" :key="item.id">
            <img class="banner-img" :src="item">
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
      <div class="banner-info">
        <ul>
          <li class="info-img">图片</li>
          <li class="info-txt">图文看房</li>
        </ul>
      </div>
    </div>
    <!--  通用组件，通过该组件传值过去  -->
    <common-gallary @close="showGallaryClose" :imgs="imgs" v-show="showGallary"></common-gallary>
  </div>
</template>

<script>
  //  图片画廊组件
  import CommonGallary from 'common/gallary/Gallary'

  export default {
    name: 'DetailsBanner',
    data () {
      return {
        swiperOptions: {
          pagination: '.swiper-pagination', // 初始化元素
          paginationType: 'fraction',       // 数字分页器
          observeParents: true,             // 自动刷新一次
          observer: true,                    // 监听自身、父元素发生变化就会自我刷新一次，解决宽度计算问题
        },
        showGallary: false,
        imgs: [
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/0756f280964943359fe638a995ae6289.jpg?x-oss-process=image/resize,w_480',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/c47124e4e17b4380ac5dff339a520bf0.jpg',
          'https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/loupan/ad9b05452c774ae284785278ac3afc73.jpg',
        ],

      }
    },
    // 注册组件
    components: {
      CommonGallary
    },
    //方法
    methods: {
      // 显示 画廊
      handleBannerClick () {
        this.showGallary = true
      },
      showGallaryClose () {
        this.showGallary = false
      }
    }
  }
</script>

<style scoped lang="stylus">
  .banner >>> .swiper-pagination
    bottom .3rem
    left 2.6rem
    color white

  /*
    .banner-wrapper img
      background-image linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
  */

  .banner-wrapper
    color #f8f8fa

  .banner
    overflow hidden
    position relative


  .banner-img
    width 100%
    height 4rem

  .banner-info
    z-index 1
    position absolute
    left 0
    right 0
    bottom .12rem
    line-height .4rem


  .banner-info ul
    display flex
    justify-content center
    align-items center

  /*background-color  rgba(0, 0, 0, 0.6)*/


  .banner-info ul li
    margin-left .1rem
    color #f8f7f7
    padding 0 .2rem
    border-radius .2rem
    margin-bottom .1rem

  .info-img
    background-color #a3c512

  .info-txt
    background-color rgba(0, 0, 0, 0.6)


</style>
